<template>	
	<div class="carrousel">
	<swiper class="swiper" :options="swiperOption"  ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in imgList">
    	<img class="broadcastImg" :src="item.imageUrl"/>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'carrousel',
    props: {
		imgList: {},
	},
    data() {
      return {
        swiperOption: {
          // spaceBetween: 30, //板块间距
          direction:'horizontal',
          loop: false, //无缝轮播
          centeredSlides: true,          
          autoplay: {  //自动轮播
            delay: 3000,
            disableOnInteraction: false	,           
          },
          pagination: {          	
            el: '.swiper-pagination',
            clickable: true,
          }
        }
      }
    }, 
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
        this.swiper.el.onmouseover = function () {
        this.swiper.autoplay.stop();
      }
      //鼠标离开开始自动切换
      this.swiper.el.onmouseout = function () {
        this.swiper.autoplay.start();
      }
    }
  }
</script>

<style>
	.swiper {
		width: 100%;
		height: 500px;
	}
	
	.swiper-slide {
		width: 100%;
		height: 500px;
	}
	
	.broadcastImg {
		height: 500px;
	}
	
	.swiper-pagination-bullet {
		width: 20px;
		height: 20px;
	}
	
	.swiper-pagination-bullet-active {
		width: 20px;
		height: 20px;
		opacity: 1;
		background: #F7F7F7;
	}
</style>